<% css_classes ||= 'btn-icon btn--wishlist' %>
<% icon_size ||= 18 %>
<% variant ||= nil %>
<div class="add-to-wishlist">
  <% if variant %>
    <div class="wished-item-<%= variant.id %> h-full"
      data-controller="wished-item"
      data-wished-item-variant-id-value="<%= variant.id %>"
      data-wished-item-create-wishlist-path-value="<%= spree.account_wishlist_wished_items_path %>"
      data-wished-item-destroy-wishlist-path-value="<%= spree.account_wishlist_wished_item_path(variant.id) %>"
    >
      <%= button_tag type: 'submit',
          class: "#{css_classes} disabled:animate-pulse",
          data: { 'wished-item-target': 'add', action: 'wished-item#add' },
          aria: { label: Spree.t('storefront.wished_items.add') } do %>
        <%= render 'spree/shared/icons/heart', width: icon_size, height: icon_size %>
        <span class="sr-only"><%= Spree.t('storefront.wished_items.add') %></span>
      <% end %>
      <%= button_tag type: 'submit',
          class: "#{css_classes} disabled:animate-pulse",
          data: { 'wished-item-target': 'remove', action: 'wished-item#remove' },
          aria: { label: Spree.t('storefront.wished_items.remove') } do %>
        <%= render 'spree/shared/icons/heart', active: true, width: icon_size, height: icon_size %>
        <span class="sr-only"><%= Spree.t('storefront.wished_items.remove') %></span>
      <% end %>
    </div>
  <% else %>
    <%= button_tag class: "#{css_classes} disabled:text-accent",
                   data: { action: 'product-form#showNotSelectedOptions', 'product-form-target': 'addToWishlist' },
                   aria: { label: Spree.t('storefront.wished_items.select_variant') } do %>
      <%= render 'spree/shared/icons/heart', width: icon_size, height: icon_size %>
      <span class="sr-only"><%= Spree.t('storefront.wished_items.select_variant') %></span>
    <% end %>
  <% end %>
</div>
